<template>
  <div>
    <span>电话号码查询</span>
    <el-input placeholder="请输入内容" v-model="input" clearable style="width:300px"></el-input>
    <el-button type="primary" @click="chaxun()">查询</el-button>
    <el-button type="text" @click="dialogFormVisible = true">新增员工</el-button>
     <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
  <el-form >
    <el-form-item label="员工账号" :label-width="formLabelWidth" style="width:400PX">
      <el-input v-model="username" autocomplete="off"></el-input>
    </el-form-item>
      <el-form-item label="员工密码" :label-width="formLabelWidth" style="width:400PX">
      <el-input v-model="password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="员工姓名" :label-width="formLabelWidth" style="width:400PX">
      <el-input v-model="nickname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="员工电话" :label-width="formLabelWidth" style="width:400PX">
      <el-input v-model="phone" autocomplete="off"></el-input>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="add()" >确 定</el-button>
  </div>
</el-dialog>
     <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="员工ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="nickname"
      label="员工姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="username"
      label="员工账号">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="员工电话">
    </el-table-column>
    <el-table-column
      label="修改信息">
      <template slot-scope="scope">
        <el-button type="text" @click="qulogFormVisible = true">修改员工信息</el-button>
<el-dialog title="收货地址" :visible.sync="qulogFormVisible">
  <el-form :model="form">
    <el-form-item label="员工ID" :label-width="formLabelWidth" style="width:400px">
      <el-input v-model="form.id" autocomplete="off"></el-input>
    </el-form-item>
      <el-form-item label="员工姓名" :label-width="formLabelWidth" style="width:400px">
      <el-input v-model="form.nickname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="员工账号" :label-width="formLabelWidth" style="width:400px">
      <el-input v-model="form.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="员工电话" :label-width="formLabelWidth" style="width:400px">
      <el-input v-model="form.phone" autocomplete="off"></el-input>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <template>
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="xiugai()">确 定</el-button>
    </template>
  </div>
</el-dialog>
      
      <el-button type="primary" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
  
</template>

<script>
import axios from "axios";
export default {
data(){
return {
  input:'',
  tableData:[],
  id:'',
  nickname:'',
  username:'',
  phone:'',
  password:'',
  dialogTableVisible: false,
  dialogFormVisible: false,
  qulogFormVisible:false,
  formLabelWidth: '120px',
  form:{
  id:'',
  nickname:'',
  password:'',
  phone:'',
  }

}


},
methods:{
// 获取员工，渲染列表
GetMember(){
  axios.get("http://124.220.177.66:8081/selectAllUser").then(res =>{
console.log(res);
this.tableData = res.data.data
  })
},
// 新增员工，重新渲染
add(){
  let obj = {
    username:this.username,
    password:this.password,
    nickname:this.nickname,
    phone:this.phone
  }
  axios.post("http://124.220.177.66:8081/addUser",{
    data:{...obj}   
  }).then(res => {
    console.log(res)
    console.log(obj)
    this.tableData.push(obj)
    this.dialogFormVisible = false
    this.GetMember()
  })
},
// 删除员工，重新渲染
del(scopeId){
  axios.post("http://124.220.177.66:8081/deleteUserById",{
  id:scopeId
  }).then(res =>{
    console.log(res);
    console.log(scopeId);
    this.GetMember()
  })
},

 // 查询员工，重新渲染
  chaxun(){
      axios.get("http://124.220.177.66:8081/selectUserByPhone",{
       params:{phone:this.input}
      }).then(res => {
         console.log(res)
         console.log(this.input)
         this.tableData = res.data.data
         
      })
  },
  // 修改员工，重新渲染
  xiugai(){
    let obj = {
      id:this.form.id,
      nickname:this.form.nickname,
      password:this.form.password,
      phone:this.form.phone
    }
    axios.post("http://124.220.177.66:8081/updateUserById",{
       ...this.form = obj
    }).then(res => {
      console.log(res)
     this.GetMember()
     this.qulogFormVisible = false
    })
  }







},

mounted(){
this.GetMember()
}

}
</script>

<style>

</style>